<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<body>
productList
<hr>
<select name="brand" id="brand">
    <option value="">--请选择--</option>
</select>
<select id="location" name="location">
    <option  value="">--请选择--</option>
</select>
<input type="button" id="select" value="查询">
<br>
<div id="default">
    <table border="1" id="tab1">
        <tr>
            <th>proImg</th>
            <th>proName</th>
            <th>price</th>
        </tr>
    </table>
</div>
<div id="find">

</div>
</body>
</html>
<style>
    table img{
        width: 40px;
        height: 40px;
    }

    #find{
        display: none;
    }
</style>
<script>
    $(function () {
        $.ajax({
            url: "product/findAll",
            type: "get",
            dataType: "json",
            success: function (resp) {
                // console.log(resp.state);
                // console.log(resp.data.length);
                var productList = resp.data;
                console.log(productList.length);
                if(resp.state == "success"){
                    for(var i=0; i<productList.length; i++){
                        $("#tab1").append(
                            "<tr>" +
                            "<td><img src='./img/"+productList[i].proImg+"'></td>"+
                            "<td>"+productList[i].proName+"</td>"+
                            "<td>"+productList[i].price+"</td>"+
                            "</tr>"
                        )
                        for(var j=i+1; j<productList.length; j++){
                            if(productList[i].brand == productList[j].brand ){
                                break
                            }
                        }
                        if(j == productList.length){
                            $("#brand").append(
                                "<option value='"+productList[i].brand+"'>"+productList[i].brand+"</option>"
                            );
                        }
                        for(var j=i+1; j<productList.length; j++){
                            if(productList[i].location == productList[j].location){
                                break;
                            }
                        }
                        if(j == productList.length){
                            console.log("true");
                            $("#location").append(
                                "<option value='"+productList[i].location+"'>"+productList[i].location+"</option>"
                            );
                        }
                    }
                }
            }
        })
    })

    $("#select").click(function () {
        var brand = $("#brand").val();
        var location = $("#location").val();
        // console.log(brand);
        // console.log(location);
        $.ajax({
            url:"product/findByOption",
            type: "get",
            data:{"brand":brand,"location":location},
            dataType: "json",
            success: function (resp) {
                var productList = resp.data;
                if(resp.state == "success"){
                    console.log("success");
                    $("#default").hide();
                    $("#find").show();
                    $("#find").html("");
                    $("#find").html(
                        "<table border='1' id='tab2'>" +
                        "<tr>" +
                        "<th>proImg</th>"+
                        "<th>proName</th>"+
                        "<th>price</th>"+
                    "</tr>"+
                    "</table>"
                );
                    for(var i=0; i<productList.length; i++){
                        $("#tab2").append(
                            "<tr>" +
                            "<td><img src='./img/"+productList[i].proImg+"'></td>"+
                            "<td>"+productList[i].proName+"</td>"+
                            "<td>"+productList[i].price+"</td>"+
                            "</tr>"
                        )
                    }
                }
            }
        })
    })
</script>